<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <!--3.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <link rel="stylesheet" href="css/ordercss/pagination.css">
    <script src="js/orderjs/pagination.js"></script>

    <script src="js/orderjs/constants.js"></script>
    <script>
        //时间格式化函数
        function timeFormat(data) {
            var date = new Date(data)
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
            var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
            return Y + M + D + h + m + s
        }

        //获取URL中指定参数名的参数值
        function getQueryString(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = window.location.search.substr(1).match(reg);
            return r != null ? unescape(r[2]) : null
        }

        //分页展示函数（适用于Item表）
        let currentPage = 1;
        let totalCount = 0;

        function pageContent(url, params) {
            $.get(url, params, function (result) {
                if (result.status === 200) {
                    //获取page对象
                    let pageObj = result.data;
                    //获取总页数
                    totalCount = pageObj.totalCount;
                    //获取当前页
                    currentPage = pageObj.currentPage;

                    for (let i = 0; i < pageObj.data.length; i++) {
                        let cate = pageObj.data[i];

                        $("#tableBody").append(
                            $("<tr>").append(
                                //项目编号（不是id）
                                $("<td>").text((params.page === undefined ? 0 : (params.page - 1) * params.pageSize) + i + 1).addClass("text-center")
                            ).append(
                                //项目名
                                $("<td>").text(cate.itemName).addClass("text-center")
                            ).append(
                                //地址
                                $("<td>").text(cate.address).addClass("text-center")
                            ).append(
                                //人数
                                $("<td>").text(cate.count).addClass("text-center")
                            ).append(
                                //时长
                                $("<td>").text((cate.endTime - cate.startTime) / 1000 / 60 / 60).addClass("text-center")
                            ).append(
                                //开始时间
                                $("<td>").text(timeFormat(cate.startTime)).addClass("text-center")
                            ).append(
                                //结束时间
                                $("<td>").text(timeFormat(cate.endTime)).addClass("text-center")
                            ).append(
                                $("<td>").text(cate.paidMoney).addClass("text-center")
                            ).append(
                                $("<td>").text(cate.isDelete === 1 ? "已取消" : "进行中")
                            )
                        )
                    }

                    //先清除之前的页码。重新按照totalCount分配页码
                    let firstLi = $("#pageManager > li").first()
                    let lastLi = $("#pageManager > li").last()

                    $("#pageManager").html("")
                    $("#pageManager").append(firstLi);
                    let pageNum = totalCount % params.pageSize === 0 ? totalCount / params.pageSize : totalCount / params.pageSize + 1
                    for (let j = 1; j <= pageNum; j++) {
                        $("#pageManager").append(
                            $("<li><a href='javascript:void(0)' value='" + j + "' class='indexPage'>" + j + "</a></li>")
                        )
                    }
                    $("#pageManager").append(lastLi)
                }

            })
        }

        //对应的sid的项目记录分页展示
        function itemShow(sid, page, pageSize) {
            let data = {
                sid: sid,
                page: page,
                pageSize: pageSize
            }

            pageContent(ITEM_PAGE_SHOW, data)
        }

        $(function () {
            let sid = getQueryString("sid");

            let data = {
                sid: sid
            }
            $.get(ORDER_DETAIL, data, function (result) {
                if (result.status === 200) {
                    let orderObj = result.data;
                    $("#clientName").val(orderObj.clientName);
                    $("#clientPhone").val(orderObj.clientPhone);
                    $("#orderNum").val(orderObj.sid);
                    $("#orderState").val(orderObj.orderState === 1 ? "已支付" : "未支付");
                    $("#orderTime").val(orderObj.createTime);
                }
            })

            $.get(TRADE_DETAIL, data, function (result) {
                if (result.status === 200) {
                    let tradeObj = result.data;
                    $("#tradeNum").val(tradeObj.tid);
                    $("#tradeTime").val(tradeObj.paidTime);
                    $("#tradeMoney").val(tradeObj.totalMoney);
                }
            })

            //初始化项目表展示
            itemShow(sid, 1, 3);

            //【重点】动态获取未加载新增元素的内容
            $("#pageManager").on("click", ".indexPage", function () {
                // pageShow(+$(this).text(), 3);
                $("#tableBody").html("");
                itemShow(sid, +$(this).text(), 3)
            })

            //点击上一页
            $("#pageManager").on("click", ".forwardPage", function () {
                if (currentPage === 1) {
                    $(".forwardPage").attr("disabled", "disabled");
                } else {
                    $("#tableBody").html("")
                    itemShow(sid, currentPage - 1, 3);
                }
            })

            //点击下一页
            $("#pageManager").on("click", ".nextPage", function () {
                let totalPage = totalCount % 3 === 0 ? (totalCount / 3) : Math.ceil(totalCount / 3);
                if (currentPage === totalPage) {
                    $(".nextPage").attr("disabled", "disabled")
                } else {
                    $("#tableBody").html("")
                    itemShow(sid, currentPage + 1, 3);
                }
            })

            //支付功能按钮
            $("#wxPayBtn").click(
                function () {
                    location.href = "OrderWXPay.html?totalMoney=" + $("#tradeMoney").val();
                }
            )
        })
    </script>
</head>
<body>
<div class="container clearfix">
    <div class="row">
        <h3>用户信息</h3>
        客户姓名：<input type="text" disabled id="clientName">
        手机号：<input type="text" disabled id="clientPhone">
    </div>

    <div class="row">
        <h3>订单信息</h3>
        <div class="row col-sm-4">
            <span>订单号：</span>
            <input type="text" disabled id="orderNum">
        </div>
        <div class="row col-sm-4">
            <span>订单状态：</span>
            <input type="text" disabled id="orderState">
        </div>
        <div class="row col-sm-4">
            <span>订单时间：</span>
            <input type="text" disabled id="orderTime">
        </div>
    </div>

    <div class="row">
        <h3>交易单信息</h3>
        <div class="row col-sm-4">
            <span>交易单号：</span>
            <input type="text" disabled id="tradeNum">
        </div>
        <div class="row col-sm-4">
            <span>支付时间：</span>
            <input type="text" disabled id="tradeTime">
        </div>
        <div class="row col-sm-4">
            <span>支付总金额：</span>
            <input type="text" disabled id="tradeMoney">
        </div>
        <div class="row col-sm-3" style="position: absolute; right: 0px; top: 213px;">
            <input type="button" class="btn btn-info" value="生成微信支付码" id="wxPayBtn">
        </div>
    </div>
    <br>
    <br>
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="text-center">
            <td>编号</td>
            <td>项目名称</td>
            <td>地址</td>
            <td>人数</td>
            <td>时长</td>
            <td>开始时间</td>
            <td>结束时间</td>
            <td>支付金额</td>
            <td>状态</td>
        </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>

    <!--分页模块-->
    <nav aria-label="Page navigation">
        <ul class="pagination" id="pageManager">
            <li>
                <a href="#" aria-label="Previous" class="forwardPage">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <li>
                <a href="#" aria-label="Next" class="nextPage">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
</body>
</html>